<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="component/pageHead.jsp"%>

<!doctype html>
<html class="no-js" lang="zxx">
<head>
    <base href="<%=basePath%>">
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Parlo - eCommerce Bootstrap 4 Template</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">
    <!-- CSS	============================================ --><!-- Bootstrap CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css"><!-- Icon Font CSS -->
    <link rel="stylesheet" href="assets/css/icons.min.css"><!-- Plugins CSS -->
    <link rel="stylesheet" href="assets/css/plugins.css"><!-- Main Style CSS -->
    <link rel="stylesheet" href="assets/css/style.css"><!-- Modernizer JS -->
    <script src="assets/js/vendor/modernizr-2.8.3.min.js"></script>

    <%--    vue--%>
    <script src="assets/js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<jsp:include page="component/head.jsp"></jsp:include>
<div class="wrapper">


    <div class="breadcrumb-area pt-35 pb-35 bg-gray">
        <div class="container">
            <div class="breadcrumb-content text-center">
                <ul>
                    <li><a href="index.jsp">Home</a></li>
                    <li class="active">contact us</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="contact-area pt-100 pb-100">
        <div class="container">
            <div class="row">
                <div class="col-lg-5 col-md-6">
                    <div class="contact-info-area"><h2>Get In Touch</h2>
                        <p>Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem
                            nibh id elituis.</p>
                        <div class="contact-info-wrap">
                            <div class="single-contact-info">
                                <div class="contact-info-icon"><i class="sli sli-location-pin"></i></div>
                                <div class="contact-info-content"><p>Address goes here, street, Crossroad 123.</p></div>
                            </div>
                            <div class="single-contact-info">
                                <div class="contact-info-icon"><i class="sli sli-envelope"></i></div>
                                <div class="contact-info-content"><p><a href="#">info@example.com</a>/ <a href="#">info@example.com</a>
                                </p></div>
                            </div>
                            <div class="single-contact-info">
                                <div class="contact-info-icon"><i class="sli sli-screen-smartphone"></i></div>
                                <div class="contact-info-content"><p>+1 35 776 859 000 / +1 35 776 859 011</p></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-7 col-md-6">
                    <div class="contact-from contact-shadow">
                        <form id="contact-form" action="http://whizthemes.com/mail-php/contact/mail.php" method="post">
                            <input name="name" type="text" placeholder="Name"><input name="email" type="email"
                                                                                     placeholder="Email"><input
                                name="subject" type="text" placeholder="Subject"><textarea name="message"
                                                                                           placeholder="Your Message"></textarea>
                            <button class="submit" type="submit">Send Message</button>
                        </form>
                        <p class="form-messege"></p></div>
                </div>
            </div>
            <div class="contact-map pt-100">
                <div id="map"></div>
            </div>
        </div>
    </div>
    <footer class="footer-area bg-paleturquoise">
        <div class="container">
            <div class="footer-top text-center pt-45 pb-45">
                <nav>
                    <ul>
                        <li><a href="#">Home </a></li>
                        <li><a href="#">Shop </a></li>
                        <li><a href="#">Accessories </a></li>
                        <li><a href="#">Contact </a></li>
                        <li><a href="#">About </a></li>
                        <li><a href="#">Blog </a></li>
                    </ul>
                </nav>
            </div>
        </div>
        <div class="footer-bottom border-top-1 pt-20">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-4 col-md-5 col-12">
                        <div class="footer-social pb-20"><a href="#">Facebok</a><a href="#">Twitter</a><a href="#">Linkedin</a><a
                                href="#">Instagram</a></div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-12">
                        <div class="copyright text-center pb-20"><p>Copyright Â© All Right <a
                                href="http://www.bootstrapmb.com/" title="bootstrapmb">Reserved</a></p></div>
                    </div>
                    <div class="col-lg-4 col-md-3 col-12">
                        <div class="payment-mathod pb-20"><a href="#"><img src="assets/img/icon-img/payment.png" alt=""></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</div><!-- All JS is here============================================ --><!-- jQuery JS -->
<script src="assets/js/vendor/jquery-1.12.4.min.js"></script><!-- Popper JS -->
<script src="assets/js/popper.min.js"></script><!-- Bootstrap JS -->
<script src="assets/js/bootstrap.min.js"></script><!-- Plugins JS -->
<script src="assets/js/plugins.js"></script><!-- Ajax Mail -->
<script src="assets/js/ajax-mail.js"></script>
<script src="http://ditu.google.cn/maps/api/js?key=AIzaSyCGM-62ap9R-huo50hJDn05j3x-mU9151Y"></script>
<script>function init() {
    var mapOptions = {
        zoom: 11,
        scrollwheel: false,
        center: new google.maps.LatLng(40.709896, -73.995481),
        styles: [{
            "featureType": "landscape",
            "stylers": [{"hue": "#FFBB00"}, {"saturation": 43.400000000000006}, {"lightness": 37.599999999999994}, {"gamma": 1}]
        }, {
            "featureType": "road.highway",
            "stylers": [{"hue": "#FFC200"}, {"saturation": -61.8}, {"lightness": 45.599999999999994}, {"gamma": 1}]
        }, {
            "featureType": "road.arterial",
            "stylers": [{"hue": "#FF0300"}, {"saturation": -100}, {"lightness": 51.19999999999999}, {"gamma": 1}]
        }, {
            "featureType": "road.local",
            "stylers": [{"hue": "#FF0300"}, {"saturation": -100}, {"lightness": 52}, {"gamma": 1}]
        }, {
            "featureType": "water",
            "stylers": [{"hue": "#0078FF"}, {"saturation": -13.200000000000003}, {"lightness": 2.4000000000000057}, {"gamma": 1}]
        }, {
            "featureType": "poi",
            "stylers": [{"hue": "#00FF6A"}, {"saturation": -1.0989010989011234}, {"lightness": 11.200000000000017}, {"gamma": 1}]
        }]
    };
    var mapElement = document.getElementById('map');
    var map = new google.maps.Map(mapElement, mapOptions);
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(40.709896, -73.995481),
        map: map,
        icon: 'assets/img/icon-img/2.png',
        animation: google.maps.Animation.BOUNCE,
        title: 'Snazzy!'
    });
}

google.maps.event.addDomListener(window, 'load', init);</script><!-- Main JS -->
<script src="assets/js/main.js"></script>
</body>
</html>